<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>陪看</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="img">
				<image :src='image' mode="aspectFill"></image>
			</view>
			<view class="list">
				<view class="list_item" v-for="(v, k) in list" :key="k">
					<view class="item_img">
						<uv-image mode="aspectFill" width="138rpx" height="100rpx" radius="5"
							:src="v.thumb" :lazy-load="true"></uv-image>
					</view>
					<view class="item_content">
						<view class="content_title">
							{{v.title}}
						</view>
						<view class="item_btn">
							<view class="item_btn_1" @tap.stop="clickBtn(1, k)">
								<image :src='STATIC_URL+"63.png"' mode="aspectFill"></image>
								<text>播放音频</text>
							</view>
							<view class="item_btn_2" @tap.stop="clickBtn(2, k)">
								<image :src='STATIC_URL+"81.png"' mode="aspectFill"></image>
								<text>观看视频</text>
							</view>
						</view>
					</view>
				</view>
				<view class="loadmore" v-if="last_page > 1">
					<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText" />
				</view>
			</view>
			<view class="noData_other" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
			</view>
		</template>


		<uv-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<template v-if="overlay_type == 1">
						<image class="audio_img" :src='STATIC_URL+"40.png"' mode="aspectFill"></image>
						<view class="audio_text">录音播放中</view>
					</template>
					<template v-if="overlay_type == 2">
						<view class="video_text">
							<view class="video_text_1">{{tipsContent}}</view>
							<!-- <view class="video_text_2">每周四-周日才可观看视频</view> -->
							<view class="video_text_3" @click="show = false">我知道了</view>
						</view>
					</template>
					<!-- <template v-if="overlay_type == 3">
						<view class="video_text">
							<view class="video_text_1">该视频暂未解锁</view>
							<view class="video_text_2">请按照视频顺序进行观看</view>
							<view class="video_text_3" @click="show = false">我知道了</view>
						</view>
					</template> -->
					<template v-if="overlay_type == 4">
						<view class="input_view" >
							<view class="input_title">访问密码</view>
							<view class="input_content">
								<input type="text" v-model="password" placeholder="请输入访问密码" placeholder-style="font-size:25rpx;color:#BFBFBF;">
							</view>
							<view class="input_bottom">
								<view class="input_bottom_1" @click="closePsd">取消</view>
								<view class="input_bottom_2" @click="videoPsd">确认</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</uv-overlay>


	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {
			
		},


		data() {
			return {
				show: false,
				overlay_type: 1,  // 弹出类型
				image: "",  // 顶部图片
				password: "",
				"innerAudioContext": null,
				"tipsContent": "",  // 弹窗提示语				
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"loadingText": '努力加载中',
				"loadmoreText": '轻轻上拉',
				"nomoreText": '没有更多了',
				"isShow": true,
				
				"video_id": "",
				"initTime": 0,  // 选择视频的播放进度
				"languageType": 1,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getImage();
		},
		onUnload() {

		},
		onReady() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
			this.getList();
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.is_pull = true;
			this.isShow = true;
			this.getList();
		},
		// 上拉加载
		onReachBottom() {
			if (this.page >= this.last_page) return;
			this.status = 'loading';
			this.page++;
			setTimeout(() => {
		
				if (this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.is_pull = false;
				this.getList();
			}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			// 陪看顶部图片  post654cceaad47e4
			getImage() {
				this.$api.post(global.apiUrls.post654cceaad47e4, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.image = res.data.data.iamge;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			getList() {
				this.$api.post(global.apiUrls.post654ccc60199e7, {
					page: this.page
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						if (this.is_pull) {
							this.list = res.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			clickBtn(type, index) {
				if (type == 1) {
					if (this.innerAudioContext) {
						this.innerAudioContext.destroy();
					}
					this.innerAudioContext = null;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					if (this.languageType == 1) {
						this.innerAudioContext.src = this.list[index].m_audio.path;
					} else if (this.languageType == 2) {
						this.innerAudioContext.src = this.list[index].audio.path;
					}
					
					this.innerAudioContext.onPlay(() => {
					  console.log('开始播放');
					});
					this.innerAudioContext.onError((res) => {
					  console.log(res.errMsg);
					  console.log(res.errCode);
					  this.$message.info('播放失败，请稍后再试');
					  this.show = false;
					});
					this.innerAudioContext.onEnded(() => {
						this.show = false;
					})
					this.overlay_type = type;
					this.show = true;
				} else {
					this.video_id = this.list[index].aid;
					if (this.list[index].video.schedule == this.list[index].video.duration) {
						this.initTime = 0;
					} else {
						this.initTime = this.list[index].video.schedule;
					}
					if (this.languageType == 1) {
						global.videoUrl = this.list[index].m_video.path;
					} else if (this.languageType == 2) {
						global.videoUrl = this.list[index].video.path;
					}
					
					this.detectionVideo(this.list[index].aid);
				}
				
			},
			// 检测能否观看视频  post65546232ad965
			detectionVideo(id) {
				this.$api.post(global.apiUrls.post65546232ad965, {
					accompanylist_id: id
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.overlay_type = 4;
						this.show = true;
					} else if (res.data.code == 0) {
						this.tipsContent = res.data.msg;
						this.overlay_type = 2;
						this.show = true;
					}
				})
			},
			closePsd() {
				this.password = "";
				this.show = false;
			},
			// 输入密码  post655593138fdf9
			videoPsd() {
				if (!this.password) {
					this.$message.info('请输入密码');
					return;
				}
				this.show = false;
				this.$api.post(global.apiUrls.post655593138fdf9, {
					access_password: this.password
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.password = "";
						uni.navigateTo({
							url: '/pages/index/watchVideo/video?video_id=' + this.video_id + '&duration=' + this.duration
						})
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 250rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.list {
		padding: 0 25rpx;

		.list_item {
			margin: 15rpx 0 0 0;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx 25rpx;
			display: flex;

			.item_img {
				width: 138rpx;
				height: 100rpx;
			}

			.item_content {
				width: calc(100% - 138rpx);
				padding: 0 0 0 25rpx;

				.content_title {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;
				}

				.item_btn {
					margin-top: 17rpx;
					padding-left: 15rpx;
					display: flex;

					.item_btn_1 {
						color: #4087FD;
						font-size: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 115rpx;
						margin-right: 20rpx;
						background: #F0F6FF;
						border-radius: 5rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
						}
					}

					.item_btn_2 {
						color: #FFA200;
						font-size: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 115rpx;
						background: #FFFCF9;
						border-radius: 5rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 450rpx;
		height: 269rpx;
		border-radius: 10rpx;
		background-color: #fff;
		text-align: center;
		position: relative;
	}
	.audio_img {
		width: 94rpx;
		height: 94rpx;
		margin: 55rpx auto 0;
	}
	.audio_text {
		font-size: 25rpx;
		color: #333333;
		margin-top: 25rpx;
	}
	.input_view {
		padding: 28rpx 0 0 0;
		.input_title {
			font-size: 28rpx;
			font-weight: 500;
		}
		.input_content {
			margin: 25rpx auto 0;
			width: 400rpx;
			height: 73rpx;
			background: #F8F8F8;
			border-radius: 36rpx;
			input {
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 25rpx;
			}
		}
		.input_bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top: 1px solid #dddddd;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			.input_bottom_1 {
				width: 50%;
				text-align: center;
				font-size: 25rpx;
				color: #999999;
			}
			.input_bottom_2 {
				width: 50%;
				text-align: center;
				font-size: 25rpx;
				color: #4087FD;
			}
		}
	}
	.video_text {
		padding: 58rpx 0 0;
		text-align: center;
		.video_text_1 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 0 100rpx;
		}
		.video_text_2 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
		}
		.video_text_3 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top: 1px solid #dddddd;
			padding: 20rpx;
			color: #4087FD;
			font-size: 25rpx;
		}
	}


	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>